﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Video.aspx.cs" Inherits="MiaoWeiProject.liuyong.Video" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
            outline: 0;
        }

        /*视频*/
        #banner {
            height: 627px;
            background: #2c1f37 url("lyimages/Video/videoBg.png") no-repeat center center;
        }

        .main {
            width: 1200px;
            margin: 0 auto;
        }

        #banner .funBar {
            width: 1200px;
            height: 46px;
            padding-top: 19px;
        }

        #banner .hotlink {
            height: 41px;
            line-height: 41px;
            font-size: 14px;
            color: #fff;
            float: left;
        }

            #banner .hotlink a {
                color: #fff;
            }

        #banner .coursetit {
            position: relative;
            height: 30px;
            color: #fff;
            padding: 16px 0;
        }

            #banner .coursetit span {
                height: 100%;
                line-height: 30px;
                display: inline-block;
                vertical-align: middle;
                font-size: 24px;
                padding-right: 10px;
                float: left;
            }

        .VIPbannerBtn {
            position: absolute;
            right: 0;
            width: 331px;
            top: -5px;
            font: 16px/20px "宋体";
            padding-left: 30px;
            text-decoration: none;
            color: #f66;
            background: url("lyimages/Video/VIPbannerBtn.png") no-repeat 0 -20px;
        }

        #banner .videoplay {
            height: 500px;
        }

        #banner .playBox {
            width: 800px;
            height: 500px;
            float: left;
            position: relative;
            background: #0c0d11 url("lyimages/Video/bg.png") no-repeat top;
        }

        .playBox .wrap.guest {
            background-image: url("lyimages/Video/guestBackground.png");
            padding-top: 125px;
        }

        .playBox .wrap {
            width: 800px;
            height: 500px;
            box-sizing: border-box;
            background-size: cover;
            background-repeat: no-repeat;
        }

            .playBox .wrap.guest .preview_text {
                text-align: center;
                line-height: 32px;
                font-size: 20px;
            }

            .playBox .wrap.guest p {
                margin: 0;
                color: #fff;
            }

            .playBox .wrap.guest a {
                text-decoration: none;
                width: 240px;
                height: 50px;
                line-height: 50px;
                font-size: 18px;
                color: #fff;
                display: block;
                background: url("lyimages/Video/registerICON.png") no-repeat 65px 14px,linear-gradient(to right, #f1665c, #e15671);
                border-radius: 25px;
                text-indent: 102px;
                box-shadow: 0 5px 10px #ff0023;
                margin-left: 270px;
                margin-top: 70px;
            }
        /*功能条*/
        #banner .scrollLine {
            width: 3px;
            height: 446px;
            background: #5b4d5e;
            z-index: 5;
            border: 1px solid #2d1c28;
            float: right;
            margin-top: 34px;
            position: relative;
            margin-left: -15px;
            margin-right: 10px;
        }

            #banner .scrollLine .scoBtn {
                width: 7px;
                height: 51px;
                background: #c2bec5;
                border: 1px solid #211a28;
                position: absolute;
                left: -3px;
                top: 0;
                border-radius: 4px;
                cursor: pointer;
            }
        /*目录*/
        #banner .videoList {
            width: 375px;
            height: 466px;
            padding-top: 34px;
            position: relative;
            float: right;
            margin-right: 10px;
        }

            #banner .videoList .listName {
                width: 100%;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 20px;
                color: #e0e0e0;
                text-align: center;
                line-height: 20px;
            }

        em, i, dfn {
            font-style: normal;
        }

        #banner .videoList .listName em {
            width: 136px;
            height: 3px;
            background: #fff;
            opacity: .3;
            position: absolute;
            font-size: 0;
            overflow: hidden;
            left: 0;
            top: 9px;
        }



        #banner .videoList .listName i {
            width: 136px;
            height: 3px;
            background: #fff;
            opacity: .3;
            font-size: 0;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 9px;
        }

        #banner .videoList .vidList {
            width: 375px;
            height: 448px;
            overflow: hidden;
            position: relative;
        }

        #banner .videoList .listBox {
            position: absolute;
            top: 0;
            height: auto;
        }

        #banner .videoList dl.active {
            height: auto;
        }

        #banner .videoList dl {
            background: url("lyimages/Video/markBg2.png") repeat;
            margin-bottom: 6px;
            height: 50px;
            overflow: hidden;
        }

            #banner .videoList dl dt {
                height: 50px;
                cursor: pointer;
            }

            #banner .videoList dl.active dt i {
                background: url("lyimages/Video/icon_study.png") no-repeat -150px 0;
                color: #fff;
            }

            #banner .videoList dl dt i {
                width: 30px;
                height: 30px;
                float: left;
                margin-top: 11px;
                background: url("lyimages/Video/icon_study.png") no-repeat -150px -30px;
                font-size: 16px;
                color: #747e8a;
                text-align: center;
                line-height: 30px;
                margin-left: 19px;
            }

            #banner .videoList dl.active dt span {
                color: #cb4b64;
            }

            #banner .videoList dl dt span {
                width: 236px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 50px;
                line-height: 50px;
                padding-left: 18px;
                font-size: 18px;
                color: #949fab;
                display: inline-block;
            }

            #banner .videoList dl.active dt em {
                background: url("lyimages/Video/open2.png") no-repeat;
            }

            #banner .videoList dl dt em {
                width: 50px;
                height: 50px;
                float: right;
                background: url("lyimages/Video/open.png") no-repeat;
                margin-right: 4px;
            }


            #banner .videoList dl.active dd {
                display: block;
            }

            #banner .videoList dl dd {
                height: 40px;
                cursor: pointer;
                position: relative;
                margin-top: 5px;
                display: none;
            }



            #banner .videoList dl dd {
                cursor: pointer;
            }

                #banner .videoList dl dd i {
                    width: 30px;
                    height: 30px;
                    float: left;
                    margin-top: 5px;
                    margin-left: 19px;
                }

                    #banner .videoList dl dd i.lock {
                        background: url("lyimages/Video/icon_video.png") no-repeat -120px -30px;
                    }

                #banner .videoList dl dd.active span {
                    color: #e15671;
                }

                #banner .videoList dl dd span {
                    height: 40px;
                    line-height: 40px;
                    padding-left: 18px;
                    font-size: 16px;
                    float: left;
                    color: #949fab;
                    width: 230px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
                }

                #banner .videoList dl dd em {
                    width: 2px;
                    height: 22px;
                    background: #444d59;
                    position: absolute;
                    top: -13px;
                    left: 33px;
                }
        .h {
            background: #000;
        }
         #banner .videoList dl dd.cc span {
                    color: #e15671;
                }
    </style>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("dd").hover(function () {
                $(this).toggleClass("cc");
                $(this).toggleClass("h");
            });
        $("dt").click(function () {
            if ($(this).parent().hasClass('active')) {
                $(this).parent().removeClass('active');
                $(this).parent().get(0).style.cssText = '';
            } else {
                $(this).parent().addClass('active');
                if (listTitle.length < 2 && $('#list dd').length < 8) {
                    $('#list dl').eq(0).height(440);
                }
                scrollLine.reload();
            }
        });
        //滚动条
        //$("#scLine").bind('mousewheel DOMMouseScroll', function fnScroll(ev) {
        //    //var ev = ev || event;
        //    alert(ev);
        //    var bDown = true;
        //    if (ev.wheelDelta) {
        //        bDown = ev.wheelDelta > 0 ? false : true;
        //    } else {
        //        bDown = ev.detail > 0 ? true : false;
        //    }
        //    if (bDown) {
        //        _this.t += _this.speed;
        //        if (_this.t > _this.maxTop) {
        //            _this.t = _this.maxTop - 1;
        //            if (_this.fn) {
        //                removeEvent(_this.oBox, 'mousewheel', fnScroll);
        //                removeEvent(_this.oBox, 'DOMMouseScroll', fnScroll);
        //                removeEvent(_this.Text, 'mousewheel', fnScroll);
        //                removeEvent(_this.Text, 'DOMMouseScroll', fnScroll);
        //                _this.fn();
        //            }
        //        }
        //    } else {
        //        _this.t -= _this.speed;
        //        if (_this.t < 0) _this.t = 0;
        //    }
        //    var scale = _this.t / _this.maxTop;
        //    var iTop = scale * _this.maxH;
        //    _this.oBoxm.style.top = _this.t + 'px';
        //    _this.Textm.style.top = iTop + 'px';
        //    if (ev.preventDefault) {
        //        ev.preventDefault()
        //    } else {
        //        window.event ? window.event.returnValue = false : ev.preventDefault();
        //    }
        //});

        //$("#listBox").bind('mousewheel DOMMouseScroll', function fnScroll(ev) {
        //    alert(1);
        //    var ev = ev || event;
        //    var bDown = true;
        //    if (ev.wheelDelta) {
        //        bDown = ev.wheelDelta > 0 ? false : true;
        //    } else {
        //        bDown = ev.detail > 0 ? true : false;
        //    }
        //    if (bDown) {
        //        _this.t += _this.speed;
        //        if (_this.t > _this.maxTop) {
        //            _this.t = _this.maxTop - 1;
        //            if (_this.fn) {
        //                removeEvent(_this.oBox, 'mousewheel', fnScroll);
        //                removeEvent(_this.oBox, 'DOMMouseScroll', fnScroll);
        //                removeEvent(_this.Text, 'mousewheel', fnScroll);
        //                removeEvent(_this.Text, 'DOMMouseScroll', fnScroll);
        //                _this.fn();
        //            }
        //        }
        //    } else {
        //        _this.t -= _this.speed;
        //        if (_this.t < 0) _this.t = 0;
        //    }
        //    var scale = _this.t / _this.maxTop;
        //    var iTop = scale * _this.maxH;
        //    _this.oBoxm.style.top = _this.t + 'px';
        //    _this.Textm.style.top = iTop + 'px';
        //    if (ev.preventDefault) {
        //        ev.preventDefault()
        //    } else {
        //        window.event ? window.event.returnValue = false : ev.preventDefault();
        //    }
        //});














        //$("#scBtn").mousedown(function (ev) {
        //    var ev = ev || event;
        //    var disY = ev.clientY - obj.offsetTop;
        //    document.onmousemove = function (ev) {
        //        var ev = ev || event;
        //        _this.t = ev.clientY - disY;
        //        if (_this.t < 0) _this.t = 0;
        //        if (_this.t > _this.maxTop) {
        //            _this.t = _this.maxTop;
        //            _this.fn && _this.fn();
        //        }
        //        var scale = _this.t / _this.maxTop;
        //        var iTop = scale * _this.maxH;
        //        obj.style.top = _this.t + 'px';
        //        _this.Textm.style.top = iTop + 'px';
        //    };
        //    document.onmouseup = function () {
        //        document.onmousemove = document.onmouseup = null;
        //    };
        //    return false;
        //});
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3><%=Request["id"] %></h3>
        <%--视频--%>
        <div id="banner">
            <div class="main">
                <div class="funBar">
                    <div class="hotlink">
                        <a href="http://www.miaov.com">首页</a>
                        &gt;
                                   
                        <a href="/study">视频课程</a>
                        &gt;
                   
                        <a href="/study#4">渐入佳境</a>
                        &gt;
                   
                        <a href="/study/show/chapter/103">《移动端开发深度揭秘》公开课</a>
                    </div>
                </div>

                <div class="coursetit">
                    <span id="title">1-移动端基本环境</span>

                    <a href="javascript:;" class="VIPbannerBtn">学习遇到问题？加入 VIP 学习交流群提问吧</a>
                </div>
                <div class="videoplay">

                    <div class="playBox">

                        <div class="wrap guest">
                            <div class="preview_text">
                                <p>目前亲是游客身份，无法试看哦，</p>
                                <p>请注册登陆后观看哦</p>
                            </div>
                            <a href="/login">我要登录</a>
                        </div>
                    </div>
                    <%-- <div class="scrollLine" id="scLine">
                        <div class="scoBtn" id="scBtn" style="height: 116.756px; display: block; top: 0px;">&nbsp;</div>

                    </div>--%>
                    <div class="videoList">
                        <div class="listName"><em>&nbsp;</em>课程大纲<i>&nbsp;</i></div>
                        <div class="vidList" id="listBox" style="overflow: scroll;">
                            <div class="listBox" id="list" style="top: 0px;">
                                <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
                                    <ItemTemplate>
                                        <dl class="active">
                                            <dt><i><%=c %></i><span><%# Eval("Smallzhangjie") %></span><em>&nbsp;</em></dt>
                                            <asp:Repeater ID="Repeater2" runat="server">
                                                <ItemTemplate>
                                                    <dd class="">
                                                        <a data-cost="1" href="/v_show/461">
                                                            <i class="lock"></i>
                                                            <span><%# Eval("Smallzhangjie") %></span><em>&nbsp;</em>
                                                        </a>
                                                    </dd>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                            <%c++; %>
                                        </dl>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</body>
</html>
